

import React, { Component } from 'react';
import styled from './Home.module.scss';

import PageHeader from '../pageHeader/PageHeader';
import HomeSearch from '../homeSearch/HomeSearch';
import RotationChart from '../rotationChart/RotationChart';

import { getHomeCarItme, getListItemPics } from '../../data/api.js';

class Home extends Component {
    state = {
        homeCatItme: [],
        listItemPics: [],
    }
    async componentDidMount() {
        const homeCarItme = await getHomeCarItme();
        const listItemPics = await getListItemPics();
        // console.log(listItemPics.message)
        this.setState({
            homeCatItme: homeCarItme.message,
            listItemPics: listItemPics.message,
        })
    }
    /* 跳转到分类页 */
    jumpToCatgory = () => {
        this.props.history.push('/catgory');
    }
    /* 跳转到产品列表 */
    jumpToProductList = () => {
        this.props.history.push("/productList");
    }
    render() {
        return (
            <div className={styled.home}>
                <PageHeader></PageHeader>
                <div className={styled.homeMain}>
                    <HomeSearch></HomeSearch>
                    <RotationChart></RotationChart>
                    <div className={styled.homeCarItme}>
                        {
                            this.state.homeCatItme.map((val, index) => {
                                return <img src={val.image_src} key={index} alt="" onClick={this.jumpToCatgory.bind(this)} />
                            })
                        }
                    </div>

                    {
                        this.state.listItemPics.map((val, index) => {
                            return (<div className={styled.listItemPics} key={index}>
                                <div className={styled.floorList}><img src={val.floor_title.image_src} alt="" /></div>
                                <div className={styled.imgBox}>
                                    {
                                        val.product_list.map((v, i) => {
                                            return (
                                                <div className={styled.productList} key={i}>
                                                    <img src={v.image_src} alt="" onClick={this.jumpToProductList.bind(this)} />
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            </div>)
                        })
                    }
                </div>
            </div>
        );
    }
}




export default Home;